<template>
  <div class="classfiy">
    <div class="top">
      <el-button
        class="primary"
        icon="el-icon-plus"
        size="small"
        @click="showadd('add')"
        >增加</el-button
      >
      <el-button type="danger" icon="el-icon-delete" size="small"
        >批量删除</el-button
      >
    </div>
    <div class="tablist">
      <el-table
        ref="multipleTable"
        :data="hotlist"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="configName" label="商品名称" width="120">
        </el-table-column>
        <el-table-column prop="redirectUrl" label="跳转链接" width="120">
        </el-table-column>
        <el-table-column prop="configRank" label="排序值" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="goodsId" label="商品编号" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="createTime" label="添加时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="mini" type="info" @click="showadd('edit',scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange" :figs="figTypes">
      </el-pagination>
      <Addgoods
        @classfiy="classfiy"
        :formVisible.sync="dialogFormVisible"
        :type="type"
        :updatalist="updatalist"
      />
    </div>
  </div>
</template>
<script>
import Addgoods from "@/components/Addgoods";
export default {
  data() {
    return {
      multipleSelection: [],
      addclassfiy: "",
      // 父传子
      dialogFormVisible: false,
      type: "add",
      hotlist:[],
      // 页数
      pagination: 1,
      // 数据总数
      total: 0,
      type:"add",
      updatalist:{},
      figTypes:3,
    };
  },
  components: {
    Addgoods,
  },
  created(){
    this.gethotlist();
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 页数改变时
    handleCurrentChange(val) {
      this.pagination = val;
      this.gethotlist();
    },
   // 弹出框显示
    showadd(status,updatalist) {
      this.dialogFormVisible = true;
      this.type = status;
      this.updatalist=updatalist?updatalist:{};
      console.log(updatalist);
    },
    classfiy(value) {
      this.addclassfiy = value;
      console.log(value);
    },
    gethotlist() {
      this.$request
        .get("/indexConfigs", {
          params: {
            pageNumber: this.pagination,
            pageSize: 10,
            configType:3
          },
          headers: {
            "X-Requested-With": "XMLHttpRequest",
            token: localStorage.getItem("token") || "",
            // token:'350059312c1a9a39f81190e9185dccb0'
          },
        })
        .then(({ data }) => {  
          this.total = data.data.totalCount;
          this.hotlist = data.data.list;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.classfiy {
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  .top {
    padding: 18px 20px;
    border: 1px solid #ebeef5;
    .primary {
      color: #fff;
      background-color: #1baeae;
      border-color: #1baeae;
    }
  }
  .tablist {
    padding: 20px;
  }
}
</style>
